<!-- eslint-disable vue/custom-event-name-casing -->
<!-- eslint-disable vue/prop-name-casing -->
<!-- eslint-disable vue/require-valid-default-prop -->
<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { CSSProperties } from "vue";
import { computed, ref, watch, watchEffect } from "vue";
import { useDraggable } from "@vueuse/core";
import type { modaldataType } from "~/components/layout/types/idnex";

const props = defineProps({
  modaldata: {
    type: Object as PropType<modaldataType>,
  },
});

const emit = defineEmits(["handleOk", "handleCancel", "JumpToRoute"]);

const selectedValue = ref(props.modaldata?.open);
const modalTitleRef = ref<any>(null);
const { x, y, isDragging } = useDraggable(modalTitleRef);
const startX = ref<number>(0);
const startY = ref<number>(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });

watch(isDragging, () => {
  if (!isDragging) {
    startedDrag.value = false;
  }
});

watchEffect(() => {
  if (startedDrag.value) {
    transformX.value
      = preTransformX.value
      + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right)
      - startX.value;
    transformY.value
      = preTransformY.value
      + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom)
      - startY.value;
  }
});

watch([x, y], () => {
  if (!startedDrag.value) {
    startX.value = x.value;
    startY.value = y.value;
    const bodyRect = document.body.getBoundingClientRect();
    const titleRect = modalTitleRef.value.getBoundingClientRect();
    dragRect.value.right = bodyRect.width - titleRect.width;
    dragRect.value.bottom = bodyRect.height - titleRect.height;
    preTransformX.value = transformX.value;
    preTransformY.value = transformY.value;
  }
  startedDrag.value = true;
});

const transformStyle = computed<CSSProperties>(() => {
  return {
    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
  };
});

// 确定按钮
const handleOk = () => {
  emit("handleOk", selectedValue);
};
// 取消按钮
const handleCancel = () => {
  emit("handleCancel");
};

// 跳转页面按钮

const JumpToRoute = () => {
  emit("JumpToRoute");
};
</script>

<template>
  <div>
    <a-modal :open="modaldata?.open" centered :closable="false" :mask="modaldata?.mask" @ok="handleOk">
      <template #title>
        <div ref="modalTitleRef" style="width: 100%; cursor: move">
          {{ modaldata?.title }}
        </div>
      </template>
      <template #footer>
        <a-button v-if="modaldata?.ReturnButText !== ''" key="back" @click="handleCancel">
          {{ modaldata?.ReturnButText }}
        </a-button>
        <a-button
          v-if="modaldata?.submitButText !== ''" key="submit" type="primary" :loading="modaldata?.loading"
          @click="handleOk"
        >
          {{ modaldata?.submitButText }}
        </a-button>

        <a-button v-if="modaldata?.JumpToPageButText !== ''" type="dashed" @click="JumpToRoute">
          {{ modaldata?.JumpToPageButText }}
        </a-button>
      </template>
      <p class="Describe">
        {{ modaldata?.Describe }}
      </p>
      <slot />

      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode" />
        </div>
      </template>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.ant-btn-primary {
  background-color: #1677ff !important;
}
</style>
